import React, { lazy, Suspense } from 'react';
import { renderRoutes, RouteConfig } from 'react-router-config';
import { PageLayout } from '@/components';

import Layout from '@/layout';
import NotFound from '@/pages/NotFound';

const Demo1 = lazy(() => import('@/pages/Demo'));

const routes = [
  {
    path: '/',
    component: Layout,
    routes: [
      {
        path: '/demo1',
        name: 'Demo1',
        component: Demo1,
        icon: 'setting',
      },
      {
        component: NotFound,
      },
    ],
  },
  {
    component: NotFound,
  },
];

const SuspenseWrap: React.FC = props => <Suspense fallback={null}>{props.children}</Suspense>;

/**
 * @param route
 * @param auth
 * @returns
 */
export const suspenseRenderRoutes = (route?: { routes?: RouteConfig[] }) => (
  <SuspenseWrap>{renderRoutes(route?.routes)}</SuspenseWrap>
);

type SuspenseRoutesProps = {
  route?: { routes?: Route[] };
};

export const SuspenseRoutes = React.memo((props: SuspenseRoutesProps) => (
  <SuspenseWrap>{renderRoutes(props.route?.routes)}</SuspenseWrap>
));

export default routes;
